如今微信H5开发越来越频繁,很多设计师也开始转行来学习移动H5开发,除了设计一些精美的UI界面以外,自己也想编辑一些高效性能的前端H5代码。
比如目前最常见的 应该是微信h5的滑动翻页效果吧。无论是纵向滑动翻页,还是横向滑动翻页,在配合CSS3动画效果组件就可以快速完成一个绚丽的H5案例。
比如这样的H5的开发案例:比如丽人丽妆2015年招聘的h5页面宣传
今天,25学堂跟爱好微信h5开发的童鞋们分享一个高性能H5全屏滑动组件。
该H5滑动翻页效果组件名称:iSlider
该H5滑动翻页效果组件的广告语就是:如丝般高性能H5全屏滑动组件h5页面效果
1、简洁, 易用, 半行代码搞定.
2、性能卓越, 如丝般高性能全屏动画滑屏组件.
3、耦合完全分离, 更轻量, 无CSS依赖,无任何js库依赖.
4、一个组件只做一个事情, 专注于页面滑动, 避免冗余 , 保证性能.
官网:http://kele527.github.io/iSlider/
微信h5开发之滑动翻页效果组件推荐:iSlider的Demo演示:
纵向的H5的滑动效果:可以扫描下面的二维码进行预览。
横向的H5的滑动效果:可以扫描下面的二维码进行预览。
2个H5的滑动翻页效果的源码可以参考这2个案例。
DEMO1: 垂直滑动 DEMO2: 水平滑动
分为2个步骤来学习和实践:
第一步:打开案例,查看源码。
第二步:复制源码到本地电脑上,自己修改对应的图片和参数即可。当然,这个过程是需要你懂一些基本的前端代码知识。
h5网站排名 第三步:这个不太会用,可以用这个H5滑动插件
一直用的是swiper.js这个, 感觉很不错。
官方地址:http://www.idangero.us/swiper
中文地址:http://www.swiper.com.cn